<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background: #82c5f8;
        }
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .container{
            width: 1200px;
            margin: auto;
        }
        .header{
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .header input{
            padding: 10px;
            font-size: 15px;
            border: 1px solid deepskyblue;
            font-weight: bold;
        }
        .banner{
            padding-bottom: 20px;
            font-size: 19px;
            font-weight: bold;
        }
        .banner div{
            float: left;
            padding-right: 80px;
        }
        .u1 li,.u2 li{
            float: left;
            padding: 10px;
            text-align: center;
            background: #248de3;
            margin: 5px;
            color: #ffffff;
            font-weight: bold;
        }
        .u1 li:hover,.u2 li:hover{
            border: 1px solid #1c7ab0;
        }
        .u1 li p,.u2 li p{
            padding-top: 15px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header clearfix">
        <input type="text" id="ipt" placeholder="查询城市天气 ">
    </div>
    <div class="banner clearfix">
        <div>城市:<span id="city" style="color:#ffffff;"></span></div>
        <div>空气质量: <span id="kqzl" style="color:#ffffff;"></span></div>
    </div>
    <div style="padding-bottom: 20px;">
        <span style="font-weight: bold; padding: 0">穿衣指数:</span>
        <span id="drsg" style="font-weight: bold;color:#ffffff;"></span>
        <p></p>
        <span style="font-weight: bold; padding: 0">洗车指数:</span>
        <span id="xc" style="color:#ffffff;font-weight: bold"></span>
        <p></p>
        <span style="font-weight: bold; padding: 0">紫外线指数:</span>
        <span id="zwx" style="font-weight: bold;color:#ffffff;"></span>
    </div>
    <div class="clearfix">
        <span style="font-weight: bolder">近期天气:</span>
        <ul style="list-style: none;" class="u1">
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
            <li>
                <p class="rq"></p>
                <p class="daily"></p>
                <p class="wd"></p>
                <p class="fx"></p>
            </li>
        </ul>
    </div>
    <div style="padding-top: 20px">
        <span style="font-weight: bolder">今日阶段温度:</span>
        <ul style="list-style: none;" class="u2">
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
            <li>
                <p class="w2"></p>
                <p class="w3"></p>
            </li>
        </ul>
    </div>
</div>




    <script>
        var city = "沧州 ";
        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var json = xmlhttp.responseText;
                    //把返回的数据，转换成数组对象格式
                    json = JSON.parse(json);
                    console.log(json);
                    //城市
                    document.querySelector("#city").innerHTML = json.basic.city;
                    //穿衣指数
                    document.querySelector("#drsg").innerHTML = json.suggestion.drsg.txt;
                    //空气质量
                    document.querySelector("#kqzl").innerHTML = json.aqi.city.qlty;
                    //洗车指数
                    document.querySelector("#xc").innerHTML = json.suggestion.cw.txt;
                    //紫外线指数
                    document.querySelector("#zwx").innerHTML = json.suggestion.uv.txt;
                    //七日日期
                    for(var r=0;r<7;r++){
                        document.querySelectorAll(".rq")[r].innerHTML = json.daily_forecast[r].date;
                    }
                    //七日天气
                    for(var i=0;i<7;i++){
                        document.querySelectorAll(".daily")[i].innerHTML = json.daily_forecast[i].cond.txt_n;
                    }
                    //七日风向
                    for(var y=0;y<7;y++){
                        document.querySelectorAll(".fx")[y].innerHTML = json.daily_forecast[y].wind.dir;
                    }
                    //七日温度
                    for(var p=0;p<7;p++){
                        document.querySelectorAll(".wd")[p].innerHTML = json.daily_forecast[p].tmp.max+"/"+json.daily_forecast[p].tmp.min+"℃";
                    }// document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

                    //阶段日期
                    for(var o=0;o<7;o++){
                        document.querySelectorAll(".w2")[o].innerHTML = json.hourly_forecast[o].date;
                    }
                    for(var e=0;e<7;e++){
                        document.querySelectorAll(".w3")[e].innerHTML = json.hourly_forecast[e].tmp+"℃";
                    }
                }
            };
            xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+city,true);
            xmlhttp.send();
        }
        loadXMLDoc();

        document.querySelector("#ipt").addEventListener("change",function () {
            console.log(this.value);
            //赋值城市
            city = this.value;
            //执行查询天气的方法
            loadXMLDoc();

        })
    </script>
</body>
</html>